<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>第一阶段-cnblog | 凌歆的博客</title>
    <meta name="generator" content="VuePress 1.9.5">
    <link rel="icon" href="/img/favicon.ico">
    <meta name="description" content="web前端技术博客,专注web前端学习与总结。JavaScript,js,ES6,TypeScript,vue,React,python,css3,html5,Node,git,github等技术文章。">
    <meta name="keywords" content="前端博客,个人技术博客,前端,前端开发,前端框架,web前端,前端面试题,技术文档,学习,面试,JavaScript,js,ES6,TypeScript,vue,python,css3,html5,Node,git,github,markdown">
    <meta name="baidu-site-verification" content="7F55weZDDc">
    <meta name="theme-color" content="#11a8cd">
    
    <link rel="preload" href="/assets/css/0.styles.d9c8cf8c.css" as="style"><link rel="preload" href="/assets/js/app.57550e13.js" as="script"><link rel="preload" href="/assets/js/2.f014c35f.js" as="script"><link rel="preload" href="/assets/js/139.a3a37c91.js" as="script"><link rel="prefetch" href="/assets/js/10.03a98811.js"><link rel="prefetch" href="/assets/js/100.145e708e.js"><link rel="prefetch" href="/assets/js/101.098ca5c8.js"><link rel="prefetch" href="/assets/js/102.4d45c69a.js"><link rel="prefetch" href="/assets/js/103.499de505.js"><link rel="prefetch" href="/assets/js/104.c2c1b9b6.js"><link rel="prefetch" href="/assets/js/105.4e9b0663.js"><link rel="prefetch" href="/assets/js/106.9bb8cf6f.js"><link rel="prefetch" href="/assets/js/107.a81b32d7.js"><link rel="prefetch" href="/assets/js/108.81511e67.js"><link rel="prefetch" href="/assets/js/109.6a6741bf.js"><link rel="prefetch" href="/assets/js/11.e8729182.js"><link rel="prefetch" href="/assets/js/110.de657fe7.js"><link rel="prefetch" href="/assets/js/111.b092af6d.js"><link rel="prefetch" href="/assets/js/112.2dca5709.js"><link rel="prefetch" href="/assets/js/113.dbed1fac.js"><link rel="prefetch" href="/assets/js/114.e95a0131.js"><link rel="prefetch" href="/assets/js/115.2e3e8285.js"><link rel="prefetch" href="/assets/js/116.e64f7fec.js"><link rel="prefetch" href="/assets/js/117.583552c9.js"><link rel="prefetch" href="/assets/js/118.aa5d18f0.js"><link rel="prefetch" href="/assets/js/119.0c7b52d7.js"><link rel="prefetch" href="/assets/js/12.d63acec2.js"><link rel="prefetch" href="/assets/js/120.13f86281.js"><link rel="prefetch" href="/assets/js/121.e2b5b7f9.js"><link rel="prefetch" href="/assets/js/122.5252216a.js"><link rel="prefetch" href="/assets/js/123.8b8a3503.js"><link rel="prefetch" href="/assets/js/124.60df855c.js"><link rel="prefetch" href="/assets/js/125.f073ab1c.js"><link rel="prefetch" href="/assets/js/126.7b73de6a.js"><link rel="prefetch" href="/assets/js/127.4e25971c.js"><link rel="prefetch" href="/assets/js/128.0edf0e06.js"><link rel="prefetch" href="/assets/js/129.5cb5a70a.js"><link rel="prefetch" href="/assets/js/13.2259ef71.js"><link rel="prefetch" href="/assets/js/130.00247fda.js"><link rel="prefetch" href="/assets/js/131.d6fc003a.js"><link rel="prefetch" href="/assets/js/132.1a32b18f.js"><link rel="prefetch" href="/assets/js/133.e46c0193.js"><link rel="prefetch" href="/assets/js/134.a6ad681f.js"><link rel="prefetch" href="/assets/js/135.2fcbe137.js"><link rel="prefetch" href="/assets/js/136.f69bf451.js"><link rel="prefetch" href="/assets/js/137.b9ef2fcc.js"><link rel="prefetch" href="/assets/js/138.7fdd9feb.js"><link rel="prefetch" href="/assets/js/14.0d6b23b9.js"><link rel="prefetch" href="/assets/js/140.a7c013ae.js"><link rel="prefetch" href="/assets/js/141.956c36ce.js"><link rel="prefetch" href="/assets/js/142.5aacfe42.js"><link rel="prefetch" href="/assets/js/143.57d691ef.js"><link rel="prefetch" href="/assets/js/144.b1e5766e.js"><link rel="prefetch" href="/assets/js/145.463284b7.js"><link rel="prefetch" href="/assets/js/146.6cc6420c.js"><link rel="prefetch" href="/assets/js/147.5b78c5a2.js"><link rel="prefetch" href="/assets/js/148.8d1d7679.js"><link rel="prefetch" href="/assets/js/149.4e0eb213.js"><link rel="prefetch" href="/assets/js/15.f6fde69d.js"><link rel="prefetch" href="/assets/js/150.b183de37.js"><link rel="prefetch" href="/assets/js/151.729ae770.js"><link rel="prefetch" href="/assets/js/152.b1297018.js"><link rel="prefetch" href="/assets/js/153.bb991bca.js"><link rel="prefetch" href="/assets/js/154.6f2286aa.js"><link rel="prefetch" href="/assets/js/155.6a9c7e4d.js"><link rel="prefetch" href="/assets/js/156.f7bd535d.js"><link rel="prefetch" href="/assets/js/157.64c0065c.js"><link rel="prefetch" href="/assets/js/158.d31ae949.js"><link rel="prefetch" href="/assets/js/159.7daea8a7.js"><link rel="prefetch" href="/assets/js/16.7be21beb.js"><link rel="prefetch" href="/assets/js/160.33cc971a.js"><link rel="prefetch" href="/assets/js/161.1676442a.js"><link rel="prefetch" href="/assets/js/162.71378046.js"><link rel="prefetch" href="/assets/js/163.99e49959.js"><link rel="prefetch" href="/assets/js/164.306f07d2.js"><link rel="prefetch" href="/assets/js/165.170977c7.js"><link rel="prefetch" href="/assets/js/166.f8602525.js"><link rel="prefetch" href="/assets/js/167.eea5c001.js"><link rel="prefetch" href="/assets/js/168.0146a311.js"><link rel="prefetch" href="/assets/js/169.05f9c9d9.js"><link rel="prefetch" href="/assets/js/17.2543f471.js"><link rel="prefetch" href="/assets/js/170.25d602b2.js"><link rel="prefetch" href="/assets/js/171.1ada26a6.js"><link rel="prefetch" href="/assets/js/172.2a0f697c.js"><link rel="prefetch" href="/assets/js/173.230d8ca8.js"><link rel="prefetch" href="/assets/js/174.e3758a2b.js"><link rel="prefetch" href="/assets/js/175.0f19f8ea.js"><link rel="prefetch" href="/assets/js/176.bf70d37d.js"><link rel="prefetch" href="/assets/js/177.4400f272.js"><link rel="prefetch" href="/assets/js/178.85af7b89.js"><link rel="prefetch" href="/assets/js/179.4cfaaaa2.js"><link rel="prefetch" href="/assets/js/18.394415f8.js"><link rel="prefetch" href="/assets/js/180.449c8409.js"><link rel="prefetch" href="/assets/js/181.73276924.js"><link rel="prefetch" href="/assets/js/182.5fab25cc.js"><link rel="prefetch" href="/assets/js/183.ecd4934d.js"><link rel="prefetch" href="/assets/js/184.246092cf.js"><link rel="prefetch" href="/assets/js/185.c671cd86.js"><link rel="prefetch" href="/assets/js/186.49bd1963.js"><link rel="prefetch" href="/assets/js/187.1fb32764.js"><link rel="prefetch" href="/assets/js/188.7c6885e9.js"><link rel="prefetch" href="/assets/js/189.a8701dec.js"><link rel="prefetch" href="/assets/js/19.ca7db8ea.js"><link rel="prefetch" href="/assets/js/190.ae3d3bde.js"><link rel="prefetch" href="/assets/js/191.ad7cd44e.js"><link rel="prefetch" href="/assets/js/192.bc443842.js"><link rel="prefetch" href="/assets/js/193.e4755764.js"><link rel="prefetch" href="/assets/js/194.814112ce.js"><link rel="prefetch" href="/assets/js/195.1c0aaa80.js"><link rel="prefetch" href="/assets/js/196.a6bd7add.js"><link rel="prefetch" href="/assets/js/20.4e91cd31.js"><link rel="prefetch" href="/assets/js/21.f095e6e1.js"><link rel="prefetch" href="/assets/js/22.72f4b8ab.js"><link rel="prefetch" href="/assets/js/23.e94eb9d2.js"><link rel="prefetch" href="/assets/js/24.0eae7d6f.js"><link rel="prefetch" href="/assets/js/25.36157609.js"><link rel="prefetch" href="/assets/js/26.dc5b6cba.js"><link rel="prefetch" href="/assets/js/27.c19b7b63.js"><link rel="prefetch" href="/assets/js/28.3aceae59.js"><link rel="prefetch" href="/assets/js/29.536091b3.js"><link rel="prefetch" href="/assets/js/3.d11119c4.js"><link rel="prefetch" href="/assets/js/30.821a4a30.js"><link rel="prefetch" href="/assets/js/31.5238784c.js"><link rel="prefetch" href="/assets/js/32.10bc7179.js"><link rel="prefetch" href="/assets/js/33.c1ed69c9.js"><link rel="prefetch" href="/assets/js/34.8d384231.js"><link rel="prefetch" href="/assets/js/35.d8890e52.js"><link rel="prefetch" href="/assets/js/36.eca37ad5.js"><link rel="prefetch" href="/assets/js/37.802549e3.js"><link rel="prefetch" href="/assets/js/38.53841770.js"><link rel="prefetch" href="/assets/js/39.7ae44409.js"><link rel="prefetch" href="/assets/js/4.493b9bca.js"><link rel="prefetch" href="/assets/js/40.ce56364a.js"><link rel="prefetch" href="/assets/js/41.85f0114b.js"><link rel="prefetch" href="/assets/js/42.714da6e2.js"><link rel="prefetch" href="/assets/js/43.fee4437c.js"><link rel="prefetch" href="/assets/js/44.b039b68b.js"><link rel="prefetch" href="/assets/js/45.96a55605.js"><link rel="prefetch" href="/assets/js/46.956ffb03.js"><link rel="prefetch" href="/assets/js/47.147d9218.js"><link rel="prefetch" href="/assets/js/48.ff787b40.js"><link rel="prefetch" href="/assets/js/49.871eee87.js"><link rel="prefetch" href="/assets/js/5.e0ba07d7.js"><link rel="prefetch" href="/assets/js/50.99b7c29e.js"><link rel="prefetch" href="/assets/js/51.8ecbf4ba.js"><link rel="prefetch" href="/assets/js/52.53d91d7e.js"><link rel="prefetch" href="/assets/js/53.af8a0d2a.js"><link rel="prefetch" href="/assets/js/54.a2f848b5.js"><link rel="prefetch" href="/assets/js/55.267e9947.js"><link rel="prefetch" href="/assets/js/56.0b201c40.js"><link rel="prefetch" href="/assets/js/57.cbdfd6f7.js"><link rel="prefetch" href="/assets/js/58.636c0c3f.js"><link rel="prefetch" href="/assets/js/59.fc9216c4.js"><link rel="prefetch" href="/assets/js/6.b98373f2.js"><link rel="prefetch" href="/assets/js/60.34f16fc4.js"><link rel="prefetch" href="/assets/js/61.4d130bd8.js"><link rel="prefetch" href="/assets/js/62.927caa10.js"><link rel="prefetch" href="/assets/js/63.a451fee0.js"><link rel="prefetch" href="/assets/js/64.32a5d47b.js"><link rel="prefetch" href="/assets/js/65.bc099429.js"><link rel="prefetch" href="/assets/js/66.3953050d.js"><link rel="prefetch" href="/assets/js/67.e934823b.js"><link rel="prefetch" href="/assets/js/68.4bcb52b0.js"><link rel="prefetch" href="/assets/js/69.bede18c8.js"><link rel="prefetch" href="/assets/js/7.8de8df2d.js"><link rel="prefetch" href="/assets/js/70.fce1daac.js"><link rel="prefetch" href="/assets/js/71.ea0a8c5d.js"><link rel="prefetch" href="/assets/js/72.15382c9e.js"><link rel="prefetch" href="/assets/js/73.848364d3.js"><link rel="prefetch" href="/assets/js/74.5fd08a50.js"><link rel="prefetch" href="/assets/js/75.c937c70d.js"><link rel="prefetch" href="/assets/js/76.a0dacd5a.js"><link rel="prefetch" href="/assets/js/77.4019cc23.js"><link rel="prefetch" href="/assets/js/78.9676a9e1.js"><link rel="prefetch" href="/assets/js/79.e46e10d5.js"><link rel="prefetch" href="/assets/js/8.2098eb96.js"><link rel="prefetch" href="/assets/js/80.987e83cb.js"><link rel="prefetch" href="/assets/js/81.eb98ff36.js"><link rel="prefetch" href="/assets/js/82.623561a7.js"><link rel="prefetch" href="/assets/js/83.e256d909.js"><link rel="prefetch" href="/assets/js/84.7d06a550.js"><link rel="prefetch" href="/assets/js/85.b8d9879e.js"><link rel="prefetch" href="/assets/js/86.31c4581b.js"><link rel="prefetch" href="/assets/js/87.e06ee05e.js"><link rel="prefetch" href="/assets/js/88.81ef718d.js"><link rel="prefetch" href="/assets/js/89.ba237d2f.js"><link rel="prefetch" href="/assets/js/9.36092fd0.js"><link rel="prefetch" href="/assets/js/90.ad2c9d92.js"><link rel="prefetch" href="/assets/js/91.a661f52d.js"><link rel="prefetch" href="/assets/js/92.1c28035b.js"><link rel="prefetch" href="/assets/js/93.c8b8e3d6.js"><link rel="prefetch" href="/assets/js/94.b6bc4a44.js"><link rel="prefetch" href="/assets/js/95.92cea882.js"><link rel="prefetch" href="/assets/js/96.5373491b.js"><link rel="prefetch" href="/assets/js/97.bb39efc8.js"><link rel="prefetch" href="/assets/js/98.af7a030f.js"><link rel="prefetch" href="/assets/js/99.07dc87d8.js">
    <link rel="stylesheet" href="/assets/css/0.styles.d9c8cf8c.css">
  </head>
  <body class="theme-mode-light">
    <div id="app" data-server-rendered="true"><div class="theme-container sidebar-open have-rightmenu"><header class="navbar blur"><div title="目录" class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="https://lingxin-tanhua.oss-cn-shanghai.aliyuncs.com/QQ%E6%88%AA%E5%9B%BE20220503092755.png" alt="凌歆的博客" class="logo"> <span class="site-name can-hide">凌歆的博客</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/" class="nav-link">首页</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端" class="dropdown-title"><a href="/web/" class="link-title">前端</a> <span class="title" style="display:none;">前端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>学习笔记</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/note/html/" class="nav-link">HTML笔记</a></li><li class="dropdown-subitem"><a href="/note/js-low/" class="nav-link">JavaScript基础笔记</a></li><li class="dropdown-subitem"><a href="/note/js-high/" class="nav-link">JavaScript高阶笔记</a></li><li class="dropdown-subitem"><a href="/note/js-dom-bom/" class="nav-link">JavaScript DOM和BOM笔记</a></li><li class="dropdown-subitem"><a href="/note/jquery/" class="nav-link">jQuery笔记</a></li><li class="dropdown-subitem"><a href="/note/ajax/" class="nav-link">Ajax笔记</a></li><li class="dropdown-subitem"><a href="/note/nodejs/" class="nav-link">NodeJs笔记</a></li><li class="dropdown-subitem"><a href="/note/reg/" class="nav-link">正则表达式笔记</a></li><li class="dropdown-subitem"><a href="/note/vue/" class="nav-link">Vue笔记</a></li><li class="dropdown-subitem"><a href="/note/react/" class="nav-link">react笔记</a></li><li class="dropdown-subitem"><a href="/note/wx/" class="nav-link">微信小程序笔记</a></li><li class="dropdown-subitem"><a href="/note/uniapp/" class="nav-link">uniapp笔记</a></li><li class="dropdown-subitem"><a href="/note/echarts/" class="nav-link">echarts笔记</a></li><li class="dropdown-subitem"><a href="/note/git/" class="nav-link">Git笔记</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="后端" class="dropdown-title"><a href="/back/" class="link-title">后端</a> <span class="title" style="display:none;">后端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/note/java/" class="nav-link">JAVA</a></li><li class="dropdown-item"><!----> <a href="/note/javaweb/" class="nav-link">JavaWeb</a></li><li class="dropdown-item"><!----> <a href="/note/mysql/" class="nav-link">MySql</a></li><li class="dropdown-item"><!----> <a href="/note/ssm/" class="nav-link">ssm</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="算法" class="dropdown-title"><a href="/algor/" class="link-title">算法</a> <span class="title" style="display:none;">算法</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/note/sf/" class="nav-link">算法训练营</a></li><li class="dropdown-item"><!----> <a href="/note/js-sf/" class="nav-link">js数据结构与算法</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="面试" class="dropdown-title"><a href="/mianshi/" class="link-title">面试</a> <span class="title" style="display:none;">面试</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/note/lqb/" class="nav-link">蓝桥杯备战</a></li><li class="dropdown-item"><!----> <a href="/note/ms/" class="nav-link">前端面试</a></li><li class="dropdown-item"><!----> <a href="/note/hmms/" class="nav-link">黑马面试</a></li><li class="dropdown-item"><!----> <a href="/note/xzms/" class="nav-link">校招零距离面试</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="解决方案" class="dropdown-title"><a href="/resolve/" class="link-title">解决方案</a> <span class="title" style="display:none;">解决方案</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/note/qd-resolve/" class="nav-link">前端解决方案</a></li><li class="dropdown-item"><!----> <a href="/note/hd-resolve/" class="nav-link">后端解决方案</a></li></ul></div></div><div class="nav-item"><a href="/pages/beb6c0bd8a66cea6/" class="nav-link">收藏</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="索引" class="dropdown-title"><a href="/archives/" class="link-title">索引</a> <span class="title" style="display:none;">索引</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/categories/" class="nav-link">分类</a></li><li class="dropdown-item"><!----> <a href="/tags/" class="nav-link">标签</a></li><li class="dropdown-item"><!----> <a href="/archives/" class="nav-link">归档</a></li></ul></div></div> <a href="https://github.com/linxin1123/vuepress-blog" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar-hover-trigger"></div> <aside class="sidebar" style="display:none;"><div class="blogger"><img src="https://lingxin-tanhua.oss-cn-shanghai.aliyuncs.com/QQ%E6%88%AA%E5%9B%BE20220503092755.png"> <div class="blogger-info"><h3>lingxin</h3> <span>凌歆</span></div></div> <nav class="nav-links"><div class="nav-item"><a href="/" class="nav-link">首页</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端" class="dropdown-title"><a href="/web/" class="link-title">前端</a> <span class="title" style="display:none;">前端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>学习笔记</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/note/html/" class="nav-link">HTML笔记</a></li><li class="dropdown-subitem"><a href="/note/js-low/" class="nav-link">JavaScript基础笔记</a></li><li class="dropdown-subitem"><a href="/note/js-high/" class="nav-link">JavaScript高阶笔记</a></li><li class="dropdown-subitem"><a href="/note/js-dom-bom/" class="nav-link">JavaScript DOM和BOM笔记</a></li><li class="dropdown-subitem"><a href="/note/jquery/" class="nav-link">jQuery笔记</a></li><li class="dropdown-subitem"><a href="/note/ajax/" class="nav-link">Ajax笔记</a></li><li class="dropdown-subitem"><a href="/note/nodejs/" class="nav-link">NodeJs笔记</a></li><li class="dropdown-subitem"><a href="/note/reg/" class="nav-link">正则表达式笔记</a></li><li class="dropdown-subitem"><a href="/note/vue/" class="nav-link">Vue笔记</a></li><li class="dropdown-subitem"><a href="/note/react/" class="nav-link">react笔记</a></li><li class="dropdown-subitem"><a href="/note/wx/" class="nav-link">微信小程序笔记</a></li><li class="dropdown-subitem"><a href="/note/uniapp/" class="nav-link">uniapp笔记</a></li><li class="dropdown-subitem"><a href="/note/echarts/" class="nav-link">echarts笔记</a></li><li class="dropdown-subitem"><a href="/note/git/" class="nav-link">Git笔记</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="后端" class="dropdown-title"><a href="/back/" class="link-title">后端</a> <span class="title" style="display:none;">后端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/note/java/" class="nav-link">JAVA</a></li><li class="dropdown-item"><!----> <a href="/note/javaweb/" class="nav-link">JavaWeb</a></li><li class="dropdown-item"><!----> <a href="/note/mysql/" class="nav-link">MySql</a></li><li class="dropdown-item"><!----> <a href="/note/ssm/" class="nav-link">ssm</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="算法" class="dropdown-title"><a href="/algor/" class="link-title">算法</a> <span class="title" style="display:none;">算法</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/note/sf/" class="nav-link">算法训练营</a></li><li class="dropdown-item"><!----> <a href="/note/js-sf/" class="nav-link">js数据结构与算法</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="面试" class="dropdown-title"><a href="/mianshi/" class="link-title">面试</a> <span class="title" style="display:none;">面试</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/note/lqb/" class="nav-link">蓝桥杯备战</a></li><li class="dropdown-item"><!----> <a href="/note/ms/" class="nav-link">前端面试</a></li><li class="dropdown-item"><!----> <a href="/note/hmms/" class="nav-link">黑马面试</a></li><li class="dropdown-item"><!----> <a href="/note/xzms/" class="nav-link">校招零距离面试</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="解决方案" class="dropdown-title"><a href="/resolve/" class="link-title">解决方案</a> <span class="title" style="display:none;">解决方案</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/note/qd-resolve/" class="nav-link">前端解决方案</a></li><li class="dropdown-item"><!----> <a href="/note/hd-resolve/" class="nav-link">后端解决方案</a></li></ul></div></div><div class="nav-item"><a href="/pages/beb6c0bd8a66cea6/" class="nav-link">收藏</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="索引" class="dropdown-title"><a href="/archives/" class="link-title">索引</a> <span class="title" style="display:none;">索引</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/categories/" class="nav-link">分类</a></li><li class="dropdown-item"><!----> <a href="/tags/" class="nav-link">标签</a></li><li class="dropdown-item"><!----> <a href="/archives/" class="nav-link">归档</a></li></ul></div></div> <a href="https://github.com/linxin1123/vuepress-blog" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>学习笔记</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>蓝桥杯备战</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>前端面试</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>黑马面试</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/pages/63837c/" aria-current="page" class="active sidebar-link">第一阶段-cnblog</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level2"><a href="/pages/63837c/#html基础" class="sidebar-link">HTML基础</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/pages/63837c/#_1-html-文件中的-doctype-是什么作用" class="sidebar-link">1. HTML 文件中的 DOCTYPE 是什么作用？</a></li><li class="sidebar-sub-header level3"><a href="/pages/63837c/#_2-html、xml、xhtml-之间有什么区别" class="sidebar-link">2. HTML、XML、XHTML 之间有什么区别？</a></li><li class="sidebar-sub-header level3"><a href="/pages/63837c/#_4-谈谈你对-html-语义化的理解" class="sidebar-link">4. 谈谈你对 HTML 语义化的理解？</a></li><li class="sidebar-sub-header level3"><a href="/pages/63837c/#_5-html5新特性" class="sidebar-link">5. HTML5新特性</a></li><li class="sidebar-sub-header level3"><a href="/pages/63837c/#_6-meta标签用法" class="sidebar-link">6. meta标签用法</a></li><li class="sidebar-sub-header level3"><a href="/pages/63837c/#_7-img的srcset" class="sidebar-link">7. img的srcset</a></li><li class="sidebar-sub-header level3"><a href="/pages/63837c/#_8-script的async和defer" class="sidebar-link">8. script的async和defer</a></li><li class="sidebar-sub-header level3"><a href="/pages/63837c/#_9-web存储" class="sidebar-link">9 web存储</a></li><li class="sidebar-sub-header level3"><a href="/pages/63837c/#_10-sticky吸顶" class="sidebar-link">10 sticky吸顶</a></li><li class="sidebar-sub-header level3"><a href="/pages/63837c/#_11-z-index" class="sidebar-link">11. z-index</a></li><li class="sidebar-sub-header level3"><a href="/pages/63837c/#_12-清除浮动" class="sidebar-link">12.  清除浮动</a></li><li class="sidebar-sub-header level3"><a href="/pages/63837c/#_13-左右两边定宽-中间自适应" class="sidebar-link">13 左右两边定宽，中间自适应</a></li><li class="sidebar-sub-header level3"><a href="/pages/63837c/#原理" class="sidebar-link">原理</a></li><li class="sidebar-sub-header level3"><a href="/pages/63837c/#_14-标准盒模型和怪异盒子模型" class="sidebar-link">14.标准盒模型和怪异盒子模型</a></li><li class="sidebar-sub-header level3"><a href="/pages/63837c/#_15-js的垃圾回收机制" class="sidebar-link">15 js的垃圾回收机制</a></li><li class="sidebar-sub-header level4"><a href="/pages/63837c/#标记清除法" class="sidebar-link">标记清除法</a></li><li class="sidebar-sub-header level3"><a href="/pages/63837c/#_16-作用域链" class="sidebar-link">16. 作用域链</a></li><li class="sidebar-sub-header level4"><a href="/pages/63837c/#vue-data节点原理" class="sidebar-link">vue data节点原理</a></li><li class="sidebar-sub-header level3"><a href="/pages/63837c/#_17-闭包" class="sidebar-link">17 闭包</a></li><li class="sidebar-sub-header level3"><a href="/pages/63837c/#_18-new构造函数执行过程" class="sidebar-link">18 new构造函数执行过程</a></li><li class="sidebar-sub-header level3"><a href="/pages/63837c/#_19-转数字的一种方式" class="sidebar-link">19 转数字的一种方式</a></li><li class="sidebar-sub-header level3"><a href="/pages/63837c/#_20-原型链的理解" class="sidebar-link">20  原型链的理解</a></li><li class="sidebar-sub-header level4"><a href="/pages/63837c/#一些辅助方法-实例使用" class="sidebar-link">一些辅助方法(实例使用)</a></li><li class="sidebar-sub-header level3"><a href="/pages/63837c/#_21-继承" class="sidebar-link">21. 继承</a></li><li class="sidebar-sub-header level4"><a href="/pages/63837c/#_1-原型继承" class="sidebar-link">1. 原型继承</a></li><li class="sidebar-sub-header level5"><a href="/pages/63837c/#注意点" class="sidebar-link">注意点</a></li><li class="sidebar-sub-header level4"><a href="/pages/63837c/#_2-组合继承" class="sidebar-link">2. 组合继承</a></li><li class="sidebar-sub-header level4"><a href="/pages/63837c/#_3-寄生组合继承" class="sidebar-link">3.  寄生组合继承</a></li><li class="sidebar-sub-header level4"><a href="/pages/63837c/#_4-class继承" class="sidebar-link">4. class继承</a></li><li class="sidebar-sub-header level3"><a href="/pages/63837c/#_22-判断是否为数组" class="sidebar-link">22  判断是否为数组</a></li><li class="sidebar-sub-header level3"><a href="/pages/63837c/#_23-this指向" class="sidebar-link">23 this指向</a></li><li class="sidebar-sub-header level3"><a href="/pages/63837c/#_24-宏任务" class="sidebar-link">24 宏任务</a></li></ul></li><li class="sidebar-sub-header level2"><a href="/pages/63837c/#网络相关" class="sidebar-link">网络相关</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/pages/63837c/#_1-https" class="sidebar-link">1. HTTPS</a></li><li class="sidebar-sub-header level3"><a href="/pages/63837c/#_2-数字证书" class="sidebar-link">2.  数字证书</a></li><li class="sidebar-sub-header level3"><a href="/pages/63837c/#_3-数字签名" class="sidebar-link">3.  数字签名</a></li><li class="sidebar-sub-header level3"><a href="/pages/63837c/#_4-http2的优势" class="sidebar-link">4. HTTP2的优势</a></li><li class="sidebar-sub-header level3"><a href="/pages/63837c/#_5-http缓存" class="sidebar-link">5. HTTP缓存</a></li><li class="sidebar-sub-header level4"><a href="/pages/63837c/#_5-1-http缓存-加快页面加载效率" class="sidebar-link">5.1 HTTP缓存（加快页面加载效率）</a></li><li class="sidebar-sub-header level3"><a href="/pages/63837c/#_6-http请求分类" class="sidebar-link">6. HTTP请求分类</a></li><li class="sidebar-sub-header level3"><a href="/pages/63837c/#_6-1-get与post请求的区别" class="sidebar-link">6.1 get与post请求的区别</a></li><li class="sidebar-sub-header level3"><a href="/pages/63837c/#_6-2-报文结构" class="sidebar-link">6.2 报文结构</a></li><li class="sidebar-sub-header level3"><a href="/pages/63837c/#_6-3-http-长连接" class="sidebar-link">6.3 HTTP 长连接</a></li><li class="sidebar-sub-header level3"><a href="/pages/63837c/#_7-tcp" class="sidebar-link">7. TCP</a></li><li class="sidebar-sub-header level4"><a href="/pages/63837c/#_7-1-一次完整的http请求" class="sidebar-link">7.1 一次完整的HTTP请求</a></li><li class="sidebar-sub-header level4"><a href="/pages/63837c/#_7-2-要点" class="sidebar-link">7.2 要点</a></li><li class="sidebar-sub-header level3"><a href="/pages/63837c/#_7-3-tcp三次握手" class="sidebar-link">7.3 TCP三次握手</a></li><li class="sidebar-sub-header level3"><a href="/pages/63837c/#_8-udp" class="sidebar-link">8. UDP</a></li><li class="sidebar-sub-header level3"><a href="/pages/63837c/#_9-前端如何实现即时通讯" class="sidebar-link">9. 前端如何实现即时通讯</a></li><li class="sidebar-sub-header level4"><a href="/pages/63837c/#短轮询" class="sidebar-link">短轮询</a></li><li class="sidebar-sub-header level4"><a href="/pages/63837c/#comet-ajax长轮询" class="sidebar-link">Comet-ajax长轮询</a></li><li class="sidebar-sub-header level4"><a href="/pages/63837c/#sse" class="sidebar-link">SSE</a></li><li class="sidebar-sub-header level4"><a href="/pages/63837c/#websocket" class="sidebar-link">WebSocket</a></li></ul></li><li class="sidebar-sub-header level2"><a href="/pages/63837c/#dom" class="sidebar-link">DOM</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/pages/63837c/#_1-浏览器如何解析css选择器" class="sidebar-link">1. 浏览器如何解析CSS选择器</a></li><li class="sidebar-sub-header level3"><a href="/pages/63837c/#_2-浏览器如何进行页面渲染" class="sidebar-link">2. 浏览器如何进行页面渲染</a></li><li class="sidebar-sub-header level3"><a href="/pages/63837c/#_3-重绘和重排" class="sidebar-link">3. 重绘和重排</a></li><li class="sidebar-sub-header level4"><a href="/pages/63837c/#重排" class="sidebar-link">重排</a></li><li class="sidebar-sub-header level4"><a href="/pages/63837c/#重绘" class="sidebar-link">重绘</a></li><li class="sidebar-sub-header level3"><a href="/pages/63837c/#_4-浏览器对重绘和重排的优化" class="sidebar-link">4. 浏览器对重绘和重排的优化</a></li><li class="sidebar-sub-header level3"><a href="/pages/63837c/#_5-避免重绘和重排的方法" class="sidebar-link">5. 避免重绘和重排的方法</a></li></ul></li><li class="sidebar-sub-header level2"><a href="/pages/63837c/#git" class="sidebar-link">GIT</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/pages/63837c/#_1-git开发流程" class="sidebar-link">1. git开发流程</a></li></ul></li><li class="sidebar-sub-header level2"><a href="/pages/63837c/#vue" class="sidebar-link">Vue</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="/pages/63837c/#_1-生命周期" class="sidebar-link">1. 生命周期</a></li><li class="sidebar-sub-header level3"><a href="/pages/63837c/#_5-3-children-parent-refs" class="sidebar-link">5.3 $children $parent  $refs</a></li><li class="sidebar-sub-header level3"><a href="/pages/63837c/#_5-4-provide-inject" class="sidebar-link">5.4 provide inject</a></li><li class="sidebar-sub-header level3"><a href="/pages/63837c/#_5-5-attrs-listeners" class="sidebar-link">5.5 $attrs $listeners</a></li><li class="sidebar-sub-header level3"><a href="/pages/63837c/#_7-vue双向数据绑定原理" class="sidebar-link">7. Vue双向数据绑定原理</a></li><li class="sidebar-sub-header level3"><a href="/pages/63837c/#_7-1-m-v-vm设计模式" class="sidebar-link">7.1 M V VM设计模式</a></li><li class="sidebar-sub-header level4"><a href="/pages/63837c/#modal层-数据模型层" class="sidebar-link">Modal层：数据模型层</a></li><li class="sidebar-sub-header level4"><a href="/pages/63837c/#view层-视图模板层" class="sidebar-link">View层：视图模板层</a></li><li class="sidebar-sub-header level4"><a href="/pages/63837c/#viewmodal层-视图模型层" class="sidebar-link">ViewModal层：视图模型层</a></li><li class="sidebar-sub-header level3"><a href="/pages/63837c/#_7-2-computed与watch的区别" class="sidebar-link">7.2 computed与watch的区别</a></li><li class="sidebar-sub-header level3"><a href="/pages/63837c/#_7-3-vue响应式系统的基本原理" class="sidebar-link">7.3 vue响应式系统的基本原理</a></li><li class="sidebar-sub-header level4"><a href="/pages/63837c/#观察者模式" class="sidebar-link">观察者模式</a></li><li class="sidebar-sub-header level4"><a href="/pages/63837c/#一句话概括" class="sidebar-link">一句话概括</a></li><li class="sidebar-sub-header level3"><a href="/pages/63837c/#_7-4-vue-key的作用" class="sidebar-link">7.4 Vue key的作用</a></li><li class="sidebar-sub-header level3"><a href="/pages/63837c/#_7-5-router传参" class="sidebar-link">7.5 router传参</a></li><li class="sidebar-sub-header level3"><a href="/pages/63837c/#_7-6-vue的seo优化" class="sidebar-link">7.6 vue的SEO优化</a></li></ul></li></ul></li><li><a href="/pages/12b817/" class="sidebar-link">JavaScript-cnblog</a></li><li><a href="/pages/c9e154/" class="sidebar-link">JavaScript(二)-cnblog</a></li><li><a href="/pages/4cd0e6/" class="sidebar-link">Vue知识点-cnblog</a></li><li><a href="/pages/3c78ec/" class="sidebar-link">VueRoute知识点-cnblog</a></li><li><a href="/pages/c59cc0/" class="sidebar-link">Vue响应式原理</a></li><li><a href="/pages/83cc7a/" class="sidebar-link">Vue虚拟DOM-cnblog</a></li><li><a href="/pages/0b785d/" class="sidebar-link">Vuex</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>校招零距离面试</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <div><main class="page"><div class="theme-vdoing-wrapper "><div class="articleInfo-wrap" data-v-06225672><div class="articleInfo" data-v-06225672><ul class="breadcrumbs" data-v-06225672><li data-v-06225672><a href="/" title="首页" class="iconfont icon-home router-link-active" data-v-06225672></a></li> <li data-v-06225672><a href="/mianshi/#面试" data-v-06225672>面试</a></li><li data-v-06225672><a href="/mianshi/#黑马面试" data-v-06225672>黑马面试</a></li></ul> <div class="info" data-v-06225672><div title="作者" class="author iconfont icon-touxiang" data-v-06225672><a href="https://github.com/linxin1123" target="_blank" title="作者" class="beLink" data-v-06225672>lingxin</a></div> <div title="创建时间" class="date iconfont icon-riqi" data-v-06225672><a href="javascript:;" data-v-06225672>2023-02-26</a></div> <!----></div></div></div> <!----> <div class="content-wrapper"><div class="right-menu-wrapper"><div class="right-menu-margin"><div class="right-menu-title">目录</div> <div class="right-menu-content"></div></div></div> <h1><img src="">第一阶段-cnblog<!----></h1>  <div class="theme-vdoing-content content__default"><h2 id="html基础"><a href="#html基础" class="header-anchor">#</a> HTML基础</h2> <h3 id="_1-html-文件中的-doctype-是什么作用"><a href="#_1-html-文件中的-doctype-是什么作用" class="header-anchor">#</a> 1. HTML 文件中的 DOCTYPE 是什么作用？</h3> <ul><li>告诉浏览器的解析器要使用哪种HTML规范或XHTML规范来解析页面</li></ul> <h3 id="_2-html、xml、xhtml-之间有什么区别"><a href="#_2-html、xml、xhtml-之间有什么区别" class="header-anchor">#</a> 2. HTML、XML、XHTML 之间有什么区别？</h3> <ul><li><p>都属于标记语言</p></li> <li><p>HTML4 和 XML同时存在</p> <ul><li>HTML4 先用后制定规范，规范不兼容（需要使用规定标签）</li> <li>XML：主要用于数据存储（可以自定义标签（可扩展性））</li></ul></li> <li><p>XHTML：解决HTML混乱问题而生，语法方面与XML一样严格（w3c闭门造车）</p></li> <li><p>HTML5 ：HTML基础上扩展，用于页面呈现</p></li></ul> <h3 id="_4-谈谈你对-html-语义化的理解"><a href="#_4-谈谈你对-html-语义化的理解" class="header-anchor">#</a> 4. 谈谈你对 HTML 语义化的理解？</h3> <ul><li>有利于SEO，可阅读性好</li></ul> <h3 id="_5-html5新特性"><a href="#_5-html5新特性" class="header-anchor">#</a> 5. HTML5新特性</h3> <ul><li><p>统一的文件类型声明 <code>&lt;!DOCTYPE html&gt;</code></p></li> <li><p>新增标签元素</p> <ul><li>section，nav，footer，header，main</li> <li>video，canvas，</li></ul></li> <li><p>input新的类型值</p> <ul><li><code>date,email,url</code></li></ul></li> <li><p>新的标签属性</p> <ul><li><code>charset(meta标签)，async(script标签)</code></li></ul></li> <li><p>全域属性</p> <ul><li>contenteditable: div内容变成可编辑（原本只有是input标签可编辑）</li> <li>draggleable：可拖拽（draggleable:true）</li></ul></li></ul> <h3 id="_6-meta标签用法"><a href="#_6-meta标签用法" class="header-anchor">#</a> 6. meta标签用法</h3> <ul><li>设置网页关键词</li> <li>设置视口</li> <li>设置http响应头，Content-Type网页内容类型（字符集）</li></ul> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>content-type<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text/html;charset=utf-8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!-- 设置字符集可简写为 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>utf-8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="_7-img的srcset"><a href="#_7-img的srcset" class="header-anchor">#</a> 7. img的srcset</h3> <div class="language-html line-numbers-mode"><pre class="language-html"><code>
<span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>UTF-8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>X-UA-Compatible<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>IE=edge<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>viewport<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>width=device-width, initial-scale=1.0<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>Document<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>

  <span class="token comment">&lt;!-- 1. 如果仅仅是对于 dpr 进行响应式处理, 可以用 srcset 
          针对于不同 dpr 的设备, 使用不同的图片显示
  --&gt;</span>
  <span class="token comment">&lt;!-- &lt;img style=&quot;width: 320px; height: 320px;&quot; srcset=&quot;320.png 1x, 640.png 2x&quot; alt=&quot;&quot;&gt; --&gt;</span>

  <span class="token comment">&lt;!-- 2. 希望能够在不同的尺寸下, 设置不同的img src (通过js也可以实现) --&gt;</span>
  <span class="token comment">&lt;!-- 
    srcset: 提供了备选项, 可以用的图片路径 (1元, 5元, 10元, 到底用哪个, 根据符合的条件)
    sizes: 响应式的配置 img 的宽度
      (max-width: 320px) 100vw  样式生效的最大宽度, &lt;=320生效, 100vw, 一个屏幕的宽度
      (max-width: 360px) 320px  320~360范围, 图片的宽度, 设置成 320px
      (max-width: 480px) 360px  360~480范围, 图片的宽度, 设置成 360px
      ...

    如果已经加载了高清图片, 再切换到小屏幕, 没有必要换成小图, 因为已经加载了
    如果要测试, 
      1. 先切换到小屏幕(浏览器宽度小) 
      2. 清除缓存
   --&gt;</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>img元素srcset属性浅析<span class="token punctuation">&quot;</span></span>
    <span class="token attr-name">srcset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>
      320.png 320w, 
      480.png 480w, 
      640.png 640w<span class="token punctuation">&quot;</span></span>
    <span class="token attr-name">sizes</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>
      (max-width: 320px) 100vw, 
      (max-width: 360px) 320px,
      (max-width: 480px) 360px,
      (max-width: 640px) 480px,
      640px<span class="token punctuation">&quot;</span></span>
    <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>640.png<span class="token punctuation">&quot;</span></span>
  <span class="token punctuation">/&gt;</span></span>
  
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br></div></div><h3 id="_8-script的async和defer"><a href="#_8-script的async和defer" class="header-anchor">#</a> 8. script的async和defer</h3> <ul><li>都是异步加载脚本，同步执行脚本</li> <li>async加载完后立即执行（同步）</li> <li>defer等dom渲染完后加载（同步）</li></ul> <p>async使用场景</p> <ul><li>js脚本之间没有依赖关系</li></ul> <p>defer</p> <ul><li>js脚本之间有依赖关系，等上面的defer脚本执行再执行（保证顺序）（onload）</li></ul> <h3 id="_9-web存储"><a href="#_9-web存储" class="header-anchor">#</a> 9 web存储</h3> <ul><li>indexedDB：异步，不会阻塞页面（即使容量很大）</li> <li>cookie：js-cookie ：处理cookie插件</li></ul> <h3 id="_10-sticky吸顶"><a href="#_10-sticky吸顶" class="header-anchor">#</a> 10 sticky吸顶</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token operator">&lt;</span>style<span class="token operator">&gt;</span>
<span class="token operator">*</span> <span class="token punctuation">{</span>
<span class="token literal-property property">margin</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token literal-property property">padding</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">.</span>header <span class="token punctuation">{</span>
<span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token number">100</span><span class="token operator">%</span><span class="token punctuation">;</span>
<span class="token literal-property property">height</span><span class="token operator">:</span> 100px<span class="token punctuation">;</span>
background<span class="token operator">-</span>color<span class="token operator">:</span> orange<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">.</span>nav <span class="token punctuation">{</span>
<span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token number">100</span><span class="token operator">%</span><span class="token punctuation">;</span>
<span class="token literal-property property">height</span><span class="token operator">:</span> 200px<span class="token punctuation">;</span>
background<span class="token operator">-</span>color<span class="token operator">:</span> pink<span class="token punctuation">;</span>
<span class="token literal-property property">position</span><span class="token operator">:</span> sticky<span class="token punctuation">;</span>
<span class="token literal-property property">top</span><span class="token operator">:</span> 0px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">.</span>main <span class="token punctuation">{</span>
<span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token number">100</span><span class="token operator">%</span><span class="token punctuation">;</span>
<span class="token literal-property property">height</span><span class="token operator">:</span> 100px<span class="token punctuation">;</span>
background<span class="token operator">-</span>color<span class="token operator">:</span> skyblue<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>style<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;header&quot;</span><span class="token operator">&gt;</span>我是头部<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;nav&quot;</span><span class="token operator">&gt;</span>我是导航<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;container&quot;</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;main&quot;</span><span class="token operator">&gt;</span>我是主体部分<span class="token number">1</span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;main&quot;</span><span class="token operator">&gt;</span>我是主体部分<span class="token number">2</span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;main&quot;</span><span class="token operator">&gt;</span>我是主体部分<span class="token number">3</span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;main&quot;</span><span class="token operator">&gt;</span>我是主体部分<span class="token number">4</span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;main&quot;</span><span class="token operator">&gt;</span>我是主体部分<span class="token number">5</span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;main&quot;</span><span class="token operator">&gt;</span>我是主体部分<span class="token number">6</span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;main&quot;</span><span class="token operator">&gt;</span>我是主体部分<span class="token number">7</span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;main&quot;</span><span class="token operator">&gt;</span>我是主体部分<span class="token number">8</span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br></div></div><ul><li>说明：即.nav盒子距离顶部距离为0时开始吸顶（即滚动距离到nav盒子时开始吸顶）</li></ul> <h3 id="_11-z-index"><a href="#_11-z-index" class="header-anchor">#</a> 11. z-index</h3> <ul><li>前提：有定位</li> <li>z-index的小坑, 如果父辈元素有定位, 且配置了z-index, 优先按照父辈元素的定位的z-index进行比较层级</li></ul> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
<span class="token selector">.father</span> <span class="token punctuation">{</span>
<span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
<span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> skyblue<span class="token punctuation">;</span>
<span class="token property">z-index</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.son</span> <span class="token punctuation">{</span>
<span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
<span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token property">z-index</span><span class="token punctuation">:</span> 999<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.box2</span> <span class="token punctuation">{</span>
<span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
<span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span>
<span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token property">z-index</span><span class="token punctuation">:</span> 100<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>father<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>son<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>box2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br></div></div><ul><li>蓝色盒子最上层（100&gt;1）</li> <li>father：1 son:999,蓝色盒子：100
<ul><li>999被父亲限制了</li></ul></li></ul> <h3 id="_12-清除浮动"><a href="#_12-清除浮动" class="header-anchor">#</a> 12.  清除浮动</h3> <div class="language-html line-numbers-mode"><pre class="language-html"><code>.clearfix::after{

	content:&quot;&quot;;
	height:0;
	line-height:0;
	display:none;
	visibility:hidden;
	clear:both;
}

.clearfix{
	zoom:1;
}
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><h3 id="_13-左右两边定宽-中间自适应"><a href="#_13-左右两边定宽-中间自适应" class="header-anchor">#</a> 13 左右两边定宽，中间自适应</h3> <ul><li>左盒子left</li> <li>右盒子right</li> <li>中间盒子overflow：hidden</li></ul> <h3 id="原理"><a href="#原理" class="header-anchor">#</a> 原理</h3> <ul><li>3个bfc，互相不影响（不影响其他人）</li></ul> <h3 id="_14-标准盒模型和怪异盒子模型"><a href="#_14-标准盒模型和怪异盒子模型" class="header-anchor">#</a> 14.标准盒模型和怪异盒子模型</h3> <ul><li>content-box :标准盒模型：盒子的height和width即为内容的实际宽度，（盒子大小加上border和padding）</li> <li>border-box:怪异盒模型：盒子的实际宽度和高度即为，css设置的属性：width和height</li></ul> <h3 id="_15-js的垃圾回收机制"><a href="#_15-js的垃圾回收机制" class="header-anchor">#</a> 15 js的垃圾回收机制</h3> <ul><li><p>判断内存是否不在使用了</p></li> <li><p>引用计数法：</p></li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> o1<span class="token operator">=</span><span class="token punctuation">{</span>
    <span class="token literal-property property">a</span><span class="token operator">:</span><span class="token number">1</span><span class="token punctuation">,</span>
    <span class="token literal-property property">b</span><span class="token operator">:</span><span class="token number">2</span>
<span class="token punctuation">}</span>

<span class="token comment">// o1引用 1</span>


<span class="token keyword">let</span> p<span class="token operator">=</span>o1

<span class="token comment">// 引用2</span>

p<span class="token operator">=</span><span class="token number">1</span>

<span class="token comment">// 引用=2-1=1</span>

<span class="token comment">// </span>

p<span class="token operator">=</span><span class="token keyword">null</span> <span class="token comment">// 引用1-1=0 ，回收</span>


</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br></div></div><ul><li>弊端，循环引用</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// o1 和 o2相互引用</span>

<span class="token comment">// 使用完后一直保持引用数为1</span>

<span class="token keyword">let</span> o1<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">}</span>  <span class="token comment">//1</span>
<span class="token keyword">let</span> o2<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">}</span>  <span class="token comment">//1</span>

o1<span class="token punctuation">.</span>a<span class="token operator">=</span>o2   <span class="token comment">// 2</span>
o2<span class="token punctuation">.</span>a<span class="token operator">=</span>o1	  <span class="token comment">// 2</span>

<span class="token comment">// o1,o2不再使用，</span>

o1<span class="token punctuation">.</span>a和o2<span class="token punctuation">.</span>a的内存块相互引用


仍有引用数<span class="token number">1</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><h4 id="标记清除法"><a href="#标记清除法" class="header-anchor">#</a> 标记清除法</h4> <ul><li>从window对象出发，看是否能访问到那块内存空间</li></ul> <h3 id="_16-作用域链"><a href="#_16-作用域链" class="header-anchor">#</a> 16. 作用域链</h3> <ul><li>全局作用域和局部作用域</li> <li>局部作用域访问其他外部作用域找到变量，找不到继续往外部作用域找，形成了作用域链</li></ul> <h4 id="vue-data节点原理"><a href="#vue-data节点原理" class="header-anchor">#</a> vue data节点原理</h4> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">obj</span><span class="token operator">:</span><span class="token punctuation">{</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token comment">// 一个组件初始化时</span>
a<span class="token punctuation">.</span>vue
aObj<span class="token operator">=</span><span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span>

<span class="token comment">// 另外一个组件初始化时</span>
b<span class="token punctuation">.</span>vue
bObj<span class="token operator">=</span><span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span>


<span class="token comment">// data()函数每次执行，都会返回的对象{obj:{}} 但是多次调用，地址不同</span>

<span class="token comment">// 相当于</span>
<span class="token comment">// 每次执行返回的obj地址不同</span>
<span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">let</span> obj<span class="token operator">=</span><span class="token punctuation">{</span>
        xxx
    <span class="token punctuation">}</span>
    
    <span class="token keyword">return</span> obj
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br></div></div><h3 id="_17-闭包"><a href="#_17-闭包" class="header-anchor">#</a> 17 闭包</h3> <ul><li>函数+该函数内可访问函数外的变量</li> <li>作用：实现数据私有(有点像java的私有变量，提供一个方法修改变量)</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">fn</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    
    <span class="token keyword">let</span> count<span class="token operator">=</span><span class="token number">0</span>
    
    <span class="token keyword">return</span> <span class="token function">add</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        count<span class="token operator">++</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'count:'</span><span class="token operator">+</span>count<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">let</span> result<span class="token operator">=</span><span class="token function">fn</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><ul><li>实现for循环中定时器顺序打印问题</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span>i<span class="token operator">&lt;</span><span class="token number">5</span><span class="token punctuation">;</span>i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    
    <span class="token comment">// 立即执行函数，函数套函数，形成引用</span>
    <span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
            
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h3 id="_18-new构造函数执行过程"><a href="#_18-new构造函数执行过程" class="header-anchor">#</a> 18 new构造函数执行过程</h3> <ul><li>创建一个新的对象</li> <li>构造函数的this指向这个对象</li> <li>执行构造函数</li> <li>返回实例</li></ul> <h3 id="_19-转数字的一种方式"><a href="#_19-转数字的一种方式" class="header-anchor">#</a> 19 转数字的一种方式</h3> <ul><li>+数据类型（+“0” +[]...）</li></ul> <h3 id="_20-原型链的理解"><a href="#_20-原型链的理解" class="header-anchor">#</a> 20  原型链的理解</h3> <ul><li>为什么要有原型链</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 以构造函数为例，我们实例化两个对象p1,p2</span>

<span class="token comment">// 共同调用构造函数中的方法</span>
<span class="token comment">// 就会出现问题，p1.method()  与p2.method()  不相同，而执行逻辑却是一样的，但是这多开辟了一块空间存放method</span>

<span class="token keyword">function</span> <span class="token function">Person</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function-variable function">sayHi</span><span class="token operator">=</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'aaa'</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">let</span> p1<span class="token operator">=</span><span class="token keyword">new</span> <span class="token class-name">Person</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token keyword">let</span> p2<span class="token operator">=</span><span class="token keyword">new</span> <span class="token class-name">Person</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
p1<span class="token punctuation">.</span><span class="token function">sayHi</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
p2<span class="token punctuation">.</span><span class="token function">sayHi</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><ul><li>解决，构造函数的原型上把这个方法挂载上去</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token class-name">Person</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">sayHi</span><span class="token operator">=</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'aaa'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token keyword">let</span> p1<span class="token operator">=</span><span class="token keyword">new</span> <span class="token class-name">Person</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token keyword">let</span> p2<span class="token operator">=</span><span class="token keyword">new</span> <span class="token class-name">Person</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token comment">// 这样内存空间不会重复开辟</span>
p1<span class="token punctuation">.</span><span class="token function">sayHi</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
p2<span class="token punctuation">.</span><span class="token function">sayHi</span><span class="token punctuation">(</span><span class="token punctuation">)</span>

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><ul><li>原型链</li></ul> <blockquote><p>实例对象访问属性或者方法时，首先在自己的原型上找(<code>__proto__</code>)</p> <p>如果找不到，则访问原型的原型</p> <p><code>p1.__proto__===Person.prototype</code></p></blockquote> <h4 id="一些辅助方法-实例使用"><a href="#一些辅助方法-实例使用" class="header-anchor">#</a> 一些辅助方法(实例使用)</h4> <ul><li>hasOwnProperty('属性名')，判断属性是否是自己的</li></ul> <h3 id="_21-继承"><a href="#_21-继承" class="header-anchor">#</a> 21. 继承</h3> <ul><li>为什么要有继承</li></ul> <blockquote><p>构造函数之间的关系，代码复用</p></blockquote> <h4 id="_1-原型继承"><a href="#_1-原型继承" class="header-anchor">#</a> 1. 原型继承</h4> <ul><li>子类的prototype=父类的实例对象（原型链实现继承）</li> <li>为什么不直接这样继承（Student.prototype=Person.prototype）
<ul><li>这样的话学生添加新方法会影响到基类的方法</li></ul></li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">Person</span><span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token operator">=</span>name
    <span class="token operator">...</span>
<span class="token punctuation">}</span>
    
<span class="token keyword">function</span> <span class="token function">Student</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token operator">...</span>
<span class="token punctuation">}</span>    
    
<span class="token class-name">Student</span><span class="token punctuation">.</span>prototype<span class="token operator">=</span><span class="token keyword">new</span> <span class="token class-name">Person</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><ul><li>原型链：<code>Student.prototype---&gt;p1---&gt;p1.__proto__(Person.prototype)</code></li></ul> <h5 id="注意点"><a href="#注意点" class="header-anchor">#</a> 注意点</h5> <ul><li>只能继承方法</li></ul> <h4 id="_2-组合继承"><a href="#_2-组合继承" class="header-anchor">#</a> 2. 组合继承</h4> <ul><li>为了解决属性没有继承的问题（把父类的构造函数执行一次）</li> <li>原型继承+借用构造函数call</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">Person</span><span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token operator">=</span>name
    <span class="token operator">...</span>
<span class="token punctuation">}</span>
    
<span class="token keyword">function</span> <span class="token function">Student</span><span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span>id</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token operator">...</span>
    <span class="token comment">// call 实现属性的继承</span>
    <span class="token function">Person</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token punctuation">)</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>id<span class="token operator">=</span>id
<span class="token punctuation">}</span>    
    
<span class="token class-name">Student</span><span class="token punctuation">.</span>prototype<span class="token operator">=</span><span class="token keyword">new</span> <span class="token class-name">Person</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><h4 id="_3-寄生组合继承"><a href="#_3-寄生组合继承" class="header-anchor">#</a> 3.  寄生组合继承</h4> <ul><li>优化原型继承（new Person() 作为原型其中的属性不是必要的）</li> <li>希望原型是一个空的对象，不过这个对象的<code>__proto__</code>为Person.prototype, 或者复制一下Person.prototype, 让我的原型指向它</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">Person</span><span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token operator">=</span>name
    <span class="token operator">...</span>
<span class="token punctuation">}</span>
    
<span class="token keyword">function</span> <span class="token function">Student</span><span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span>id</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token operator">...</span>
    <span class="token comment">// call 实现属性的继承</span>
    <span class="token function">Person</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token punctuation">)</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>id<span class="token operator">=</span>id
<span class="token punctuation">}</span>    
    
<span class="token class-name">Student</span><span class="token punctuation">.</span>prototype<span class="token operator">=</span>Object<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token class-name">Person</span><span class="token punctuation">.</span>prototype<span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><ul><li>Object.create(参数对象)
<ul><li>生成一个新对象</li> <li>新对象的<code>__proto__</code>---&gt;参数对象</li></ul></li></ul> <h4 id="_4-class继承"><a href="#_4-class继承" class="header-anchor">#</a> 4. class继承</h4> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">class</span> <span class="token class-name">Person</span> <span class="token punctuation">{</span>
  <span class="token function">constructor</span> <span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> age</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> name
    <span class="token keyword">this</span><span class="token punctuation">.</span>age <span class="token operator">=</span> age
  <span class="token punctuation">}</span>
    
    <span class="token comment">// 即Person.prototype.jump</span>
  <span class="token function">jump</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'会跳'</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h3 id="_22-判断是否为数组"><a href="#_22-判断是否为数组" class="header-anchor">#</a> 22  判断是否为数组</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code>object<span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span>

Array<span class="token punctuation">.</span><span class="token function">isArray</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="_23-this指向"><a href="#_23-this指向" class="header-anchor">#</a> 23 this指向</h3> <ul><li>默认绑定（window，global）</li> <li>隐式绑定（函数调用者）</li> <li>上下文绑定（call，apply，bind）</li></ul> <h3 id="_24-宏任务"><a href="#_24-宏任务" class="header-anchor">#</a> 24 宏任务</h3> <ul><li>主线程要执行的代码，定时器</li> <li>微任务：promise,then.catch</li></ul> <h2 id="网络相关"><a href="#网络相关" class="header-anchor">#</a> 网络相关</h2> <h3 id="_1-https"><a href="#_1-https" class="header-anchor">#</a> 1. HTTPS</h3> <ul><li><p>HTTPS为什么要出现</p> <ul><li>HTTP传输数据是明文的，https对传输数据进行加密</li></ul></li> <li><p>HTTPS</p> <ul><li>对称加密+非对称加密</li></ul> <blockquote><p>非对称加密什么：对称加密的密钥</p> <p>对称加密密钥传输成功后，双方都使用对称的密钥进行数据通信</p></blockquote> <ul><li>为什么这样做</li></ul> <blockquote><p>非对称加密大型数据是需要性能支撑</p></blockquote></li></ul> <h3 id="_2-数字证书"><a href="#_2-数字证书" class="header-anchor">#</a> 2.  数字证书</h3> <ul><li>为什么要出现数字证书（场景）</li></ul> <blockquote><p>一开始，客户端和服务器都不认识，它们准备使用安全信道进行通信</p> <ol><li>客户端请求服务器，得到服务器公开的公钥</li> <li>服务器响应被别人拦截（篡改的公钥），那么你以后的通信就是用的别人的公钥，那别人是不是肯定有私有，那是不是你说的话它都知道</li></ol></blockquote> <ul><li>不直接响应公钥，响应证书（包含公钥），（来证明这个网站的连接是安全的），这里并没有根源上解决问题，只是提示了网站不安全（你最终是不是还没拿到可靠的公钥）</li></ul> <h3 id="_3-数字签名"><a href="#_3-数字签名" class="header-anchor">#</a> 3.  数字签名</h3> <ul><li>为了保证证书不被篡改</li></ul> <blockquote><p>对证书hash生成唯一标识，唯一标识通过ca私钥加密发给接收方，接收方对网站发过来的证书同样hash（1），ca发过来的进行ca公钥解密（2）</p> <p>比对1，2</p></blockquote> <h3 id="_4-http2的优势"><a href="#_4-http2的优势" class="header-anchor">#</a> 4. HTTP2的优势</h3> <ul><li>二进制传输数据，解析更高效</li> <li>头部压缩：请求头重复的部分记录下来</li> <li>服务器推送</li> <li>多路复用
<ul><li>一个tcp连接承载多个数量的双向通信</li></ul></li></ul> <h3 id="_5-http缓存"><a href="#_5-http缓存" class="header-anchor">#</a> 5. HTTP缓存</h3> <ul><li>web服务缓存：数据库缓存，服务端缓存（代理服务器缓存），浏览器缓存</li> <li>浏览器缓存：HTTP缓存，本地存储（cookie，localstorage，indexFb）</li></ul> <h4 id="_5-1-http缓存-加快页面加载效率"><a href="#_5-1-http缓存-加快页面加载效率" class="header-anchor">#</a> 5.1 HTTP缓存（加快页面加载效率）</h4> <ul><li>强缓存：食品过期时间（进行判断，是否资源过期，如果未过期，直接使用缓存）
<ul><li>Expired:绝对过期时间
<ul><li>问题：服务器时间和浏览器时间不一致，出现cache-control</li> <li>时间服务器发过来，判断却与浏览器时间比对</li></ul></li> <li>cache-control:相对过期时间（优先级大）
<ul><li>以浏览器时间为准</li></ul></li></ul></li> <li>协商缓存：未命中强缓存（找服务器协商）
<ul><li>一定要发请求询问服务器</li> <li>两种情况
<ul><li>304：继续读缓存</li> <li>200：重新发请求</li></ul></li> <li>过程
<ul><li>第一个请求资源是，服务器会返回最后修改时间Last-modify</li> <li>进行协商缓存请求时，请求头包含if-modify-since（值为未修改之前的最后修改时间），服务器收到后根据现在资源的最后修改时间与if-modify-since比对，进行反馈</li></ul></li> <li>ETag/if-none-Match（优先级大于last-modify）
<ul><li>为了解决修改日期问题：一秒内修改多次，时间上无差别，认为没有修改</li> <li>而Etag这是文件校验码</li></ul></li></ul></li></ul> <p>了解专业术语</p> <ul><li>缓存命中率：多少请求是从缓存中读取的</li></ul> <h3 id="_6-http请求分类"><a href="#_6-http请求分类" class="header-anchor">#</a> 6. HTTP请求分类</h3> <ul><li>get/delete:数据拼接在请求头</li> <li>post/put/patch：数据通过请求体传输</li></ul> <h3 id="_6-1-get与post请求的区别"><a href="#_6-1-get与post请求的区别" class="header-anchor">#</a> 6.1 get与post请求的区别</h3> <ul><li>数据传输：get：地址栏，post：请求体</li> <li>数据类型：get：ascall码，post：任何</li> <li>功能特性：get：幂等：多次请求的结果和一次请求结果相同
<ul><li>post：多次请求的结果不相同</li></ul></li></ul> <h3 id="_6-2-报文结构"><a href="#_6-2-报文结构" class="header-anchor">#</a> 6.2 报文结构</h3> <ul><li>请求/响应/行</li> <li>请求/响应/头</li> <li>空行</li> <li>请求/响应/体</li></ul> <p>请求行</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token constant">GET</span> xxx<span class="token punctuation">.</span>com <span class="token constant">HTTP</span><span class="token operator">/</span><span class="token number">1.1</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>响应行</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token constant">HTTP</span><span class="token operator">/</span><span class="token number">1.1</span> <span class="token number">200</span> ok
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h3 id="_6-3-http-长连接"><a href="#_6-3-http-长连接" class="header-anchor">#</a> 6.3 HTTP 长连接</h3> <ul><li>HTTP/1.1加入</li> <li>connection:keep-alive\</li> <li>连接限制：Keep-alive:timeout=5,max=100
<ul><li>超时时间</li> <li>请求次数</li></ul></li></ul> <h3 id="_7-tcp"><a href="#_7-tcp" class="header-anchor">#</a> 7. TCP</h3> <ul><li>面向连接的，可靠服务</li> <li>只支持一对一</li> <li>确认重传机制保证可靠通信</li> <li>TCP是面向字节的，累积确认保证顺序</li> <li>TCP使用滑动窗口实现流量控制</li></ul> <h4 id="_7-1-一次完整的http请求"><a href="#_7-1-一次完整的http请求" class="header-anchor">#</a> 7.1 一次完整的HTTP请求</h4> <ol><li>在浏览器输入要访问的网址，DNS对域名进行解析获取IP</li> <li>根据IP找到对应服务器，建立TCP连接(三次握手)</li> <li>建立HTTP连接</li> <li>服务器响应HTTP连接，浏览器得到HTML代码，进行渲染</li> <li>浏览器解析过程遇到需要的资源再次发起请求获取</li> <li>服务器关闭TCP连接（四次握手）</li></ol> <h4 id="_7-2-要点"><a href="#_7-2-要点" class="header-anchor">#</a> 7.2 要点</h4> <ul><li>DNS域名解析
<ul><li>递归查询：以DNS服务器身份去查询ip</li> <li>迭代查询：本地服务器迭代其他域名服务器</li> <li>查询过程：浏览器缓存--&gt;本地缓存(hosts)--&gt;本地域名服务器--&gt;根域名服务器---&gt;顶级（可能找到）--&gt;权限域名服务器(可能找到)</li></ul></li> <li>HTML渲染
<ul><li>html---&gt;dom</li> <li>css---&gt;渲染树</li> <li>边解析边下载（浏览器）</li> <li>js单线程（会阻塞资源下载），为了防止DOM结构被js修改</li></ul></li></ul> <h3 id="_7-3-tcp三次握手"><a href="#_7-3-tcp三次握手" class="header-anchor">#</a> 7.3 TCP三次握手</h3> <ul><li>服务器方被动打开pcb控制块，等待客户的一方发起连接请求</li> <li>客户端发起请求后（SYN=1,seq=x）</li> <li>服务器收到并确认后(SYN=1,ACK=1,seq=y,ack=x+1)</li> <li>客户端发确认（ACK=1，ack=y+1）</li></ul> <blockquote><p>为什么是三次，防止第二次的确认迟到，建立错误的连接</p></blockquote> <h3 id="_8-udp"><a href="#_8-udp" class="header-anchor">#</a> 8. UDP</h3> <ul><li>无连接，不可靠</li> <li>支持一对多</li> <li>速率快，额外开销少</li></ul> <h3 id="_9-前端如何实现即时通讯"><a href="#_9-前端如何实现即时通讯" class="header-anchor">#</a> 9. 前端如何实现即时通讯</h3> <ul><li>为什么不能实现</li></ul> <blockquote><p>HTTP协议只能客户端发起请求，服务器响应，而服务器主动推送做不到</p></blockquote> <ul><li>实现方式
<ul><li>短轮询</li> <li>Comet</li> <li>SSE</li> <li>WebSocket</li></ul></li></ul> <h4 id="短轮询"><a href="#短轮询" class="header-anchor">#</a> 短轮询</h4> <ul><li>客户端定时发送请求，获取服务器最新数据
<ul><li>实现简单，浏览器兼容</li> <li>资源消耗大</li></ul></li></ul> <h4 id="comet-ajax长轮询"><a href="#comet-ajax长轮询" class="header-anchor">#</a> Comet-ajax长轮询</h4> <ul><li><p>客户端通过xhr对象发起HTTP请求，如果服务器没有更新数据，请求会一直阻塞</p> <ul><li>结果：服务器更新数据，返回结果，再次长轮询
<ul><li>服务器不更新数据，请求超时，再次长轮询</li></ul></li></ul></li> <li><p>优缺点</p> <ul><li>浏览器兼容性好</li> <li>服务器压力大，请求在服务器端不处理</li></ul></li></ul> <h4 id="sse"><a href="#sse" class="header-anchor">#</a> SSE</h4> <ul><li>服务端推送，基于HTTP，HTML5中的流数据传输
<ul><li>浏览器发送请求，服务器声明此次发送的数据为流数据，之后服务器一直向客户端发送数据</li></ul></li> <li>优缺点
<ul><li>不是严格意义上的双向通信，</li> <li>兼容性不好，</li></ul></li></ul> <h4 id="websocket"><a href="#websocket" class="header-anchor">#</a> WebSocket</h4> <p><img src="https://img2023.cnblogs.com/blog/3089561/202302/3089561-20230226095853183-1425233857.png" alt=""></p> <h2 id="dom"><a href="#dom" class="header-anchor">#</a> DOM</h2> <h3 id="_1-浏览器如何解析css选择器"><a href="#_1-浏览器如何解析css选择器" class="header-anchor">#</a> 1. 浏览器如何解析CSS选择器</h3> <ul><li>从右往左解析</li></ul> <p><strong>为什么不是从左往右</strong></p> <blockquote><p>因为从左往右需要遍历整课DOM树，例如.mode-nav h3 span</p> <ol><li>遍历整棵树，找到.mode-nav</li> <li>把.mode-nav 作为根，继续遍历后续 h3</li> <li>h3 作为根，找到span</li></ol></blockquote> <p><strong>从右往左比较节省性能</strong></p> <blockquote><p>先找到span，遍历整棵树</p> <p>span找到根html没找到就结束了</p> <p>span找到了h3 ,h3 找.mode-nav,节点树比往下找是少的</p></blockquote> <ul><li>原因还是孩子太多了，父亲少</li></ul> <h3 id="_2-浏览器如何进行页面渲染"><a href="#_2-浏览器如何进行页面渲染" class="header-anchor">#</a> 2. 浏览器如何进行页面渲染</h3> <p><img src="https://img2023.cnblogs.com/blog/3089561/202302/3089561-20230226095852853-1087677823.png" alt=""></p> <ol><li>获取HTML文件并解析生成DOM树</li> <li>同时解析CSS文件生成样式规则树(style rule)</li> <li>根据DOM树和样式规则树生成渲染树(render tree)</li> <li>进行布局（重排），即为每一个节点分配在屏幕的位置</li> <li>进行重绘，遍历渲染树节点，调用GPU将元素呈现出来</li></ol> <h3 id="_3-重绘和重排"><a href="#_3-重绘和重排" class="header-anchor">#</a> 3. 重绘和重排</h3> <h4 id="重排"><a href="#重排" class="header-anchor">#</a> 重排</h4> <ul><li>重新生成布局，重新排列元素</li> <li>发生阶段(布局发生改变)
<ul><li>DOM的增删</li> <li>元素位置，尺寸变化</li> <li>内容变化</li> <li>页面初始化渲染</li> <li>浏览器窗口大小变化</li></ul></li></ul> <h4 id="重绘"><a href="#重绘" class="header-anchor">#</a> 重绘</h4> <ul><li>元素的外观发生改变，需要重新绘制</li> <li>发生阶段
<ul><li>元素样式发生改变</li> <li>发生了重排</li></ul></li></ul> <blockquote><p>重绘不一定发生重排，重排一定发生重绘</p></blockquote> <h3 id="_4-浏览器对重绘和重排的优化"><a href="#_4-浏览器对重绘和重排的优化" class="header-anchor">#</a> 4. 浏览器对重绘和重排的优化</h3> <p><img src="https://img2023.cnblogs.com/blog/3089561/202302/3089561-20230226095852430-523046466.png" alt=""></p> <ul><li>不会发生过渡效果！！！</li></ul> <blockquote><p>浏览器在渲染是，把多次重排和重绘放入一个队列中，当队列的长度到达某个数值时，才进行一次重排和重绘</p></blockquote> <p><strong>等队列中的操作到了一定的数量或者到了一定的时间间隔，浏览器就会flush队列，进行一个<code>批处理</code>。</strong></p> <p>这样就会让多次的重排、重绘变成了一次重排重绘。</p> <p>虽然有了浏览器的优化，但有时候我们写的一些代码可能会强制浏览器提前flush队列，这样浏览器的优化可能起不到作用了。</p> <p>比如当你请求向浏览器获取一些样式信息的时候(保证获取结果的准确性)，就会让浏览器flush队列</p> <ol><li>offsetTop, offsetLeft, offsetWidth, offsetHeight</li> <li>scrollTop/Left/Width/Height</li> <li>clientTop/Left/Width/Height</li> <li>请求了getComputedStyle()</li></ol> <p><img src="https://img2023.cnblogs.com/blog/3089561/202302/3089561-20230226095851934-2119688935.png" alt=""></p> <h3 id="_5-避免重绘和重排的方法"><a href="#_5-避免重绘和重排的方法" class="header-anchor">#</a> 5. 避免重绘和重排的方法</h3> <ol><li>集中处理样式</li> <li>不使用offsetTop等系列获取，会flush队列</li> <li>使用transform实现动画效果，不使用left，top
<ul><li>transform只是视觉效果上的变化，元素只会发生重绘，原有的位置不发生改变</li></ul></li> <li>使用documentFragment（文档碎片）</li></ol> <h2 id="git"><a href="#git" class="header-anchor">#</a> GIT</h2> <h3 id="_1-git开发流程"><a href="#_1-git开发流程" class="header-anchor">#</a> 1. git开发流程</h3> <ul><li>有一个dev分支，写新功能，在dev分支上新开分支，书写新的功能</li> <li>功能完成后，合并到dev分支</li> <li>dev分支完成后，合并到release分支，release分支经过bug修复后，合并到master分支和dev分支</li> <li>master分支如果要紧急修复，开辟hotfix分支</li> <li>循环第一步</li></ul> <h2 id="vue"><a href="#vue" class="header-anchor">#</a> Vue</h2> <h3 id="_1-生命周期"><a href="#_1-生命周期" class="header-anchor">#</a> 1. 生命周期</h3> <ol><li>开始创建：beforeCreate，created</li> <li>初始化数据：beforeMount，mounted</li> <li>编译模板</li> <li>挂载DOM：mounted</li> <li>渲染、更新数据：beforeUpdate，Updated</li> <li>卸载：beforeDestroy，destoryed</li></ol> <h3 id="_5-3-children-parent-refs"><a href="#_5-3-children-parent-refs" class="header-anchor">#</a> 5.3 $children $parent  $refs</h3> <p>(1) $children</p> <p>父组件中,  $children 返回的是一个组件集合，如果你能清楚的知道子组件的顺序，你也可以使用下标来操作</p> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token comment">// 父组件中</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>hello_world<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>com-a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>com-a</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>com-b</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>com-b</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>this.$children[0]  =&gt;  <code>&lt;com-a&gt;&lt;/com-a&gt;</code></p> <p>this.$children[1]  =&gt;  <code>&lt;com-b&gt;&lt;/com-b&gt;</code></p> <p>(2) $parent</p> <p>子组件中, this.$parent 指向父组件</p> <p>this.$parent.xxx = 200</p> <p>this.$parent.fn()</p> <p>(3) $refs</p> <p>通过添加 ref 和 $refs 配合, 也可以很方便的获取子组件, 访问调用子组件的属性或方法</p> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token comment">// 父组件中</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>hello_world<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>com-a</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>coma<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>com-a</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">  // this.$refs.coma.count = 200
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>com-b</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>comb<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>com-b</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">  // this.$refs.comb.addFn()
  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>this.$refs.coma =&gt; <code>&lt;com-a&gt;&lt;/com-a&gt;</code></p> <p>this.$refs.comb =&gt;  <code>&lt;com-b&gt;&lt;/com-b&gt;</code></p> <h3 id="_5-4-provide-inject"><a href="#_5-4-provide-inject" class="header-anchor">#</a> 5.4 provide inject</h3> <p>**成对出现：**provide和inject是成对出现的</p> <p><strong>作用</strong>：用于父组件向子孙组件传递数据</p> <p><strong>使用方法：</strong></p> <ul><li>provide在父组件中, 返回要传给下级的数据</li> <li>inject在需要使用这个数据的子孙组件中注入数据。（不论组件层次有多深）</li></ul> <p>父组件</p> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
	<span class="token function">provide</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token punctuation">{</span>
            <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>value <span class="token comment">// 共享给子孙组件的数据</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function">data</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token punctuation">{</span>
            <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">'父组件的数据'</span><span class="token punctuation">,</span>
            <span class="token literal-property property">money</span><span class="token operator">:</span> <span class="token number">100</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><p>子孙组件</p> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">inject</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'value'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token literal-property property">props</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token operator">...</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="_5-5-attrs-listeners"><a href="#_5-5-attrs-listeners" class="header-anchor">#</a> 5.5 $attrs $listeners</h3> <p>在 Vue 2.4 版本中加⼊的 <code>$attrs</code> 和 <code>$listeners</code> 可以用来作为跨级组件之间的通信机制。 (父传孙)</p> <p><strong>父组件</strong></p> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
    &lt;my-child1 :money=&quot;100&quot; desc='你好哇' @test1=&quot;fn1&quot; @test2=&quot;fn2&quot;&gt;</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-child1</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p><strong>子组件</strong></p> <div class="language-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>my-child1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!-- $attrs =&gt; { &quot;money&quot;: 100, &quot;desc&quot;: &quot;你好哇&quot; } --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>{{ $attrs }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-child2</span> <span class="token attr-name">v-bind</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>$attrs<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-on</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>$listeners<span class="token punctuation">&quot;</span></span> <span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>my-child2</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> MyChild2 <span class="token keyword">from</span> <span class="token string">'./my-child2'</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  <span class="token function">created</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>$listeners<span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    MyChild2
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div><p><img src="E:/%E7%99%BE%E5%BA%A6%E7%BD%91%E7%9B%98%E4%B8%8B%E8%BD%BD/%E5%89%8D%E7%AB%AF%E5%B0%B1%E4%B8%9A%E5%8A%A0%E5%BC%BA%E8%AF%BE/day04%EF%BC%88%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8E%9F%E7%90%86+%E5%B7%A5%E7%A8%8B%E5%8C%96+Vue%E7%9B%B8%E5%85%B3%EF%BC%89/day04%EF%BC%88%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8E%9F%E7%90%86+%E5%B7%A5%E7%A8%8B%E5%8C%96+Vue%E7%9B%B8%E5%85%B3%EF%BC%89/02-%E7%AC%94%E8%AE%B0/images/image-20210309011422081.png" alt="image-20210309011422081"></p> <p><strong>孙组件</strong></p> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
    我是child2 - </span><span class="token punctuation">{</span><span class="token punctuation">{</span> money <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token plain-text"> - </span><span class="token punctuation">{</span><span class="token punctuation">{</span> desc <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token plain-text">
    &lt;button @click=&quot;clickFn&quot;&gt;按钮</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
export default {
  props: ['money', 'desc'],
  methods: {
    clickFn () {
      this.$emit('test1', '嘎嘎')
      this.$emit('test2', '嘿嘿')
    }
  }
}
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div><p><img src="E:/%E7%99%BE%E5%BA%A6%E7%BD%91%E7%9B%98%E4%B8%8B%E8%BD%BD/%E5%89%8D%E7%AB%AF%E5%B0%B1%E4%B8%9A%E5%8A%A0%E5%BC%BA%E8%AF%BE/day04%EF%BC%88%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8E%9F%E7%90%86+%E5%B7%A5%E7%A8%8B%E5%8C%96+Vue%E7%9B%B8%E5%85%B3%EF%BC%89/day04%EF%BC%88%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8E%9F%E7%90%86+%E5%B7%A5%E7%A8%8B%E5%8C%96+Vue%E7%9B%B8%E5%85%B3%EF%BC%89/02-%E7%AC%94%E8%AE%B0/images/image-20210309122823432.png" alt="image-20210309122823432"></p> <h3 id="_7-vue双向数据绑定原理"><a href="#_7-vue双向数据绑定原理" class="header-anchor">#</a> 7. Vue双向数据绑定原理</h3> <ul><li>definedProperty（vue2）
<ul><li>监听单个属性</li> <li>只支持get，set</li> <li>兼容性IE9</li></ul></li> <li>Proxy(vue3)
<ul><li>监听对象，数组的变化</li> <li>支持多种数据变化的劫持（get,set,deleteProperty）</li></ul></li></ul> <h3 id="_7-1-m-v-vm设计模式"><a href="#_7-1-m-v-vm设计模式" class="header-anchor">#</a> 7.1 M V VM设计模式</h3> <h4 id="modal层-数据模型层"><a href="#modal层-数据模型层" class="header-anchor">#</a> Modal层：数据模型层</h4> <ul><li>ajax请求得到的数据</li></ul> <h4 id="view层-视图模板层"><a href="#view层-视图模板层" class="header-anchor">#</a> View层：视图模板层</h4> <h4 id="viewmodal层-视图模型层"><a href="#viewmodal层-视图模型层" class="header-anchor">#</a> ViewModal层：视图模型层</h4> <ul><li>暴露数据给View层，进行数据般的，指令声明，进行业务逻辑实现</li></ul> <p><strong>核心</strong></p> <ul><li>数据驱动视图</li> <li>双向数据绑定</li></ul> <h3 id="_7-2-computed与watch的区别"><a href="#_7-2-computed与watch的区别" class="header-anchor">#</a> 7.2 computed与watch的区别</h3> <ul><li>computed
<ul><li>必须有返回值</li> <li>依赖的属性发生变化，计算属性的值重新计算</li> <li>可以缓存</li></ul></li> <li>watch
<ul><li>监视数据的变化</li> <li>没有返回值，而是数据变化后进行一系列的逻辑操作</li></ul></li></ul> <h3 id="_7-3-vue响应式系统的基本原理"><a href="#_7-3-vue响应式系统的基本原理" class="header-anchor">#</a> 7.3 vue响应式系统的基本原理</h3> <ul><li>通过Object.defineProperty完成对数据的劫持，通过观察者模式完成对于节点的数据更新</li></ul> <h4 id="观察者模式"><a href="#观察者模式" class="header-anchor">#</a> 观察者模式</h4> <ul><li>定义对象间一种一对多的依赖关系，当一个对象的状态发生改变时，就通知所有依赖于它的对象</li></ul> <p><img src="https://img2023.cnblogs.com/blog/3089561/202302/3089561-20230226095851395-1410571637.png" alt=""></p> <h4 id="一句话概括"><a href="#一句话概括" class="header-anchor">#</a> 一句话概括</h4> <ul><li>vue采用观察者模式，劫持需要变化的数据，当数据发生变化时，会通知到依赖收集dep，观察者watcher(计算属性，侦听器，渲染)会订阅dep，dep得到数据更新的情况后会通知watcher，watcher处理后进行视图的更新渲染</li></ul> <h3 id="_7-4-vue-key的作用"><a href="#_7-4-vue-key的作用" class="header-anchor">#</a> 7.4 Vue key的作用</h3> <ul><li>给虚拟dom添加标识，便于新旧dom的比较</li></ul> <p><strong>为什么需要加标识</strong></p> <ul><li><p>默认比较算法diff：同层元素之间按下标比较，0--0，1--1</p></li> <li><p>场景：如果新旧dom其他差别不大，只是新dom前插了一个元素，那么下标比较是不是全错，性能就低了</p></li></ul> <p><img src="https://img2023.cnblogs.com/blog/3089561/202302/3089561-20230226095850898-724197785.png" alt=""></p> <ul><li>加上key：就可以实现相同key的比较
<ul><li>以空间换时间</li></ul></li></ul> <h3 id="_7-5-router传参"><a href="#_7-5-router传参" class="header-anchor">#</a> 7.5 router传参</h3> <ul><li><p>query传参</p> <ul><li>拼接在地址栏</li> <li>可以path，也可以命名路由</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">this</span><span class="token punctuation">.</span>$router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token literal-property property">path</span><span class="token operator">:</span><span class="token string">'/home'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">query</span><span class="token operator">:</span><span class="token punctuation">{</span>
        
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token keyword">this</span><span class="token punctuation">.</span>$router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token literal-property property">name</span><span class="token operator">:</span><span class="token string">'home'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">query</span><span class="token operator">:</span><span class="token punctuation">{</span>
        
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><ul><li><strong>刷新参数不丢失</strong></li></ul></li> <li><p>params传参</p> <ul><li>地址栏不显示</li> <li><strong>只能是命名路由</strong></li> <li><strong>刷新参数丢失</strong></li></ul></li></ul> <ol><li><p>可以配合 localStorage 使用</p> <p>(1) A 跳转路由到 B, 通过 params 传值</p> <p>(2) B 页面中, 立刻通过  this.$route.params 获取参数</p> <p>​      (获取参数的逻辑, 优先从$route中拿, 如果拿不到(说明刷新了), 从本地取即可)</p> <p>(3) 拿到参数后, 立刻存到本地 (保证刷新丢失后, 还能从本地拿)</p> <p>(4) 实现功能...</p></li></ol> <p>B页面的逻辑</p> <div class="language-jsx line-numbers-mode"><pre class="language-jsx"><code><span class="token function">created</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">let</span> username <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$route<span class="token punctuation">.</span>params<span class="token punctuation">.</span>username
    <span class="token keyword">if</span> <span class="token punctuation">(</span>username<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token comment">// 刚跳过来, 有参数, 立刻存起来</span>
        localStorage<span class="token punctuation">.</span><span class="token function">setItem</span><span class="token punctuation">(</span><span class="token string">'myParams'</span><span class="token punctuation">,</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>$route<span class="token punctuation">.</span>params<span class="token punctuation">)</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
        <span class="token comment">// 没有, 说明用户刷新了, 丢失了params, username参数, 本地拿</span>
        username <span class="token operator">=</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>localStorage<span class="token punctuation">.</span><span class="token function">getItem</span><span class="token punctuation">(</span><span class="token string">'myParams'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span>username
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h3 id="_7-6-vue的seo优化"><a href="#_7-6-vue的seo优化" class="header-anchor">#</a> 7.6 vue的SEO优化</h3> <p><strong>服务端渲染SSR</strong></p> <ul><li>单页面的vue，网络爬虫只能看到div根标签（其他内容由js渲染），内容为空</li> <li>服务端渲染就是把html结构在服务端生成，发给浏览器，爬虫爬取到的就是完整的（这里需要后端为nodejs）</li></ul> <p><strong>静态化</strong></p> <ul><li>nuxt.js实现静态化打包（打包时生成html的静态结构）</li> <li>不支持路径参数路由：<code>/user/:id</code></li></ul> <p><strong>插件预渲染</strong></p> <ul><li>少数页面进行SEO</li> <li>速度慢</li></ul> <p><strong>Phantomjs</strong></p> <ul><li>针对爬虫（机器）用户，SEO排名多由爬虫用户决定</li> <li>判断是否为爬虫，是的话调用后台node.js环境生成html静态结构</li></ul></div></div>  <div class="page-edit"><div class="edit-link"><a href="https://github.com/linxin1123/vuepress-blog/edit/master/docs/08.面试/03.黑马面试/01.第一阶段-cnblog.md" target="_blank" rel="noopener noreferrer">编辑</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <!----> <div class="last-updated"><span class="prefix">上次更新:</span> <span class="time">2023/02/26, 19:02:51</span></div></div> <div class="page-nav-wapper"><div class="page-nav-centre-wrap"><a href="/pages/0e436b/" class="page-nav-centre page-nav-centre-prev"><div class="tooltip">JavaScript进阶(一)</div></a> <a href="/pages/12b817/" class="page-nav-centre page-nav-centre-next"><div class="tooltip">JavaScript-cnblog</div></a></div> <div class="page-nav"><p class="inner"><span class="prev">
        ←
        <a href="/pages/0e436b/" class="prev">JavaScript进阶(一)</a></span> <span class="next"><a href="/pages/12b817/">JavaScript-cnblog</a>→
      </span></p></div></div></div> <div class="article-list"><div class="article-title"><a href="/archives/" class="iconfont icon-bi">最近更新</a></div> <div class="article-wrapper"><dl><dd>01</dd> <dt><a href="/pages/0b785d/"><div>
            Vuex
            <!----></div></a> <span class="date">03-14</span></dt></dl><dl><dd>02</dd> <dt><a href="/pages/c59cc0/"><div>
            Vue响应式原理
            <!----></div></a> <span class="date">03-14</span></dt></dl><dl><dd>03</dd> <dt><a href="/pages/83cc7a/"><div>
            Vue虚拟DOM-cnblog
            <!----></div></a> <span class="date">03-14</span></dt></dl> <dl><dd></dd> <dt><a href="/archives/" class="more">更多文章&gt;</a></dt></dl></div></div></main></div> <div class="footer"><div class="icons"><a href="3010733382@qq.com" title="发邮件" target="_blank" class="iconfont icon-youjian"></a><a href="https://github.com/linxin1123" title="GitHub" target="_blank" class="iconfont icon-github"></a><a href="https://music.163.com/#/playlist?id=755597173" title="听音乐" target="_blank" class="iconfont icon-erji"></a></div> 
  Theme by
  <a href="https://github.com/xugaoyi/vuepress-theme-vdoing" target="_blank" title="本站主题">Vdoing</a> 
    | Copyright © 2022-2023
    <span>lingxin | <a href="https://github.com/linxin1123/vuepress-blog/blob/master/LICENSE" target="_blank">MIT License</a></span></div> <div class="buttons"><div title="返回顶部" class="button blur go-to-top iconfont icon-fanhuidingbu" style="display:none;"></div> <div title="去评论" class="button blur go-to-comment iconfont icon-pinglun" style="display:none;"></div> <div title="主题模式" class="button blur theme-mode-but iconfont icon-zhuti"><ul class="select-box" style="display:none;"><li class="iconfont icon-zidong">
          跟随系统
        </li><li class="iconfont icon-rijianmoshi">
          浅色模式
        </li><li class="iconfont icon-yejianmoshi">
          深色模式
        </li><li class="iconfont icon-yuedu">
          阅读模式
        </li></ul></div></div> <!----> <!----> <!----></div><div class="global-ui"><div></div></div></div>
    <script src="/assets/js/app.57550e13.js" defer></script><script src="/assets/js/2.f014c35f.js" defer></script><script src="/assets/js/139.a3a37c91.js" defer></script>
  </body>
</html>
